<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="渠道编号" prop="channelCode">
        <el-input v-model="queryParams.channelCode" placeholder="请输入渠道编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="渠道名称" prop="channelName" class="single-line-label">
        <span class="label-spacing"></span>
        <el-select v-model="queryParams.channelName" clearable placeholder="请选择渠道名称" filterable>
          <el-option v-for="(item, i) in extData.channelNameList || []" :key="i" :label="item.key"
            :value="item.key"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="落地页类型" prop="pageType" class="single-line-label">
        <span class="label-spacing"></span>
        <el-select v-model="queryParams.pageType" clearable placeholder="请选择落地页类型">
          <el-option v-for="(item, i) in extData.pageTypeMapList || []" :key="i" :label="item.key"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流量类型" prop="flowRateType" class="single-line-label">
        <span class="label-spacing"></span>
        <el-select v-model="queryParams.flowRateType" clearable placeholder="请选择落地页类型">
          <el-option v-for="(item, i) in extData.flowRateTypeList || []" :key="i" :label="item.key"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="计价类型" prop="chargeType">
        <el-select v-model="queryParams.chargeType" clearable placeholder="请选择计价类型">
          <el-option v-for="(item, i) in extData.chargeTypeList || []" :key="i" :label="item.key" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="渠道类型" prop="channelType">
        <el-select v-model="queryParams.channelType" clearable placeholder="请选择渠道类型">
          <el-option v-for="(item, i) in extData.channelTypeList || []" :key="i" :label="item.key" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="渠道商务" prop="ownerName">
        <!-- <el-input v-model="queryParams.ownerName" placeholder="请输入商务姓名" clearable @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.ownerId" clearable placeholder="请选择渠道商务">
          <el-option v-for="(item, i) in extData.ownerInfoList || []" :key="i" :label="item.nickname"
            :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="应用名称" prop="appCode">
        <el-select v-model="queryParams.appCode" clearable placeholder="请搜索应用名称" filterable>
          <el-option v-for="(item, i) in extData.appInfoList || []" :key="i" :label="item.key" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd"
          v-hasPermi="['channel:baseInfo:add']">新增</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-plus"
          size="small"
          @click="updateChannel1"
        >一键关闭</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-plus"
          size="small"
          @click="updateChannel"
        >一键开启</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="baseInfoList" @selection-change="handleSelectionChange">
      <el-table-column label="渠道名称" align="center" prop="channelName">
        <template slot-scope="scope">
          {{ scope.row.channelName }} [{{ scope.row.channelCode }}]
        </template>
      </el-table-column>
      <el-table-column label="渠道类型" align="center" prop="channelTypeStr" />
      <el-table-column label="流量类型" align="center" prop="flowRateTypeStr" width="120" />
      <el-table-column label="价格（比率）（不扣量）" align="center" prop="channelName">
        <template slot-scope="scope">
          {{ scope.row.priceAmount }} [{{ scope.row.channelRate }}] [{{ scope.row.noDiscountNumber }}]
        </template>
      </el-table-column>
      <el-table-column label="计价类型" align="center" prop="chargeTypeStr">
        <template slot-scope="scope">
          {{ scope.row.chargeTypeStr }}
          <el-button type="text" v-if="scope.row.chargeType == 2" @click="showLoginInfo(scope.row)">后台</el-button>
          <el-button type="text" v-if="scope.row.chargeType == 3" @click="showUnionKey(scope.row)">密钥</el-button>
        </template>
      </el-table-column>

      <el-table-column label="落地页" align="center" prop="pageTypeStr" />
      <el-table-column label="推广地址" align="center" prop="pageUrl" width="300">
        <template slot-scope="scope">
          <a :href="scope.row.pageUrl" target="_blank" style="color: blue" class="blue-link">{{ scope.row.pageUrl }}</a>
        </template>
      </el-table-column>
      <el-table-column label="应用包名" align="center" prop="appName">
        <template slot-scope="scope">
          {{ scope.row.appName }}[{{ scope.row.appCode }}]
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @change="handleStatusChange(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="短信状态" align="center" prop="smsFlag">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.smsFlag" :active-value="1" :inactive-value="0"
            @change="changeSmsInfoStatus(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="产品上架" align="center" prop="showProductFlag">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.showProductFlag" :active-value="1" :inactive-value="0"
            @change="changeProductStatus(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="半流程展示" align="center" prop="apibStatus">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.apibStatus" :active-value="1" :inactive-value="0"
                     @change="changeApibStatus(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="短信营销" align="center" prop="smsSendStatus">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.smsSendStatus" :active-value="1" :inactive-value="0"
                     @change="channelSmsSendStatus(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="留资定时状态" align="center" prop="taskStatus">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.taskStatus" :active-value="1" :inactive-value="0"
                     @change="channelTaskStatus(scope.row, $event)"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="扩展信息" align="center" prop="extInfo">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleUpdateExtInfo(scope.row)">查看/编辑</el-button>
          <!-- <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdateExtInfo(scope.row)"
            v-hasPermi="['channel:channelExtInfo:edit']">编辑</el-button> -->
        </template>
      </el-table-column>

      <el-table-column label="商务信息" align="center" prop="ownerName">
        <template slot-scope="scope">
          {{ scope.row.ownerName }}[{{ scope.row.ownerId }}]
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['channel:baseInfo:edit']">修改</el-button>
          <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['channel:baseInfo:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />


    <!-- 查看弹窗 -->
    <el-dialog :visible.sync="loginInfoDialogVisible" width="400px" append-to-body>
      <div class="card-container">
        <!-- <div class="dialog-content"> -->

        <div class="info-item">
          <span class="info-label">登录账户:</span>
          <span class="info-value">{{ loginInfo.adminName }}</span>
        </div>
        <br>
        <div class="info-item">
          <span class="info-label">登录密码:</span>
          <span class="info-value">{{ loginInfo.adminPwd }}</span>
        </div>
        <br>
        <div class="info-item">
          <span class="info-label">登录地址:</span>
          <span class="info-value">{{ loginInfo.loginAddress }}</span>
        </div>
        <br>
        <!-- </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 查看联登信息-->
    <el-dialog :visible.sync="unionKeyDialogVisible" width="400px" append-to-body>
      <div class="card-container">
        <!-- <div class="dialog-content"> -->

        <div class="info-item">
          <span class="info-label">渠道编号（channelCode）:</span><br>
          <span class="info-value">{{ unionKey.channelCode }}</span>
        </div>
        <br>
        <div class="info-item">
          <span class="info-label">密钥（appSecret）:</span><br>
          <span class="info-value">{{ unionKey.appSecret }}</span>
        </div>
        <br>
        <div class="info-item">
          <span class="info-label">接口地址（requestUrl）:</span><br>
          <span class="info-value">{{ unionKey.requestUrl }}</span>
        </div>
        <br>
        <!-- </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改渠道扩展信息-->
    <el-dialog :title="titleExt" :visible.sync="openExt" width="500px" append-to-body>
      <el-form ref="formExt" :model="formExt" :rules="rules" label-width="80px">

        <el-form-item label="渠道编号" prop="channelCode">
          <el-input v-model="formExt.channelCode" readonly="" />

        </el-form-item>

        <!-- <el-form-item label="芝麻分" prop="zhimaFilter">
          <el-input v-model="formExt.zhimaFilter" placeholder="芝麻分" />
        </el-form-item> -->

        <el-form-item label="芝麻分" prop="zhimaFilterArray">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item, i) in (extData.zhimaMapList || [])" :key="i" :label="item.key">
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- <el-form-item label="芝麻分" prop="zhimaFilter">
           <el-checkbox-group v-model="formExt.zhimaFilterArray">
              <el-checkbox  v-for="(item, i) in (extData.zhimaMapList || [])" :key="i"
                :label="item.key" :value="item.value">
              </el-checkbox>
           </el-checkbox-group> -->
        <!-- <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
          </el-checkbox-group> -->
        <!-- </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormExt" v-hasPermi="['channel:channelExtInfo:edit']">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加或修改渠道基本信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="渠道编码" prop="channelCode">
          <el-input v-model="form.channelCode" placeholder="请输入渠道编码" />
           <span>注意：添加小程序渠道的时候，填写appid。其他类型渠道该值不填写</span>
        </el-form-item>

        <el-form-item label="渠道名称" prop="channelName">
          <el-input v-model="form.channelName" placeholder="请输入渠道名称" />
        </el-form-item>

        <el-form-item label="计价类型" prop="chargeType">
          <el-select v-model="form.chargeType" style="width: 100%;" placeholder="请选择渠道类型">
            <el-option v-for="(item, i) in extData.chargeTypeList || []" :key="i" :label="item.key" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流量类型" prop="flowRateType"
          :rules="[{ required: true, message: '请选择流量类型', trigger: 'change' }]">
          <el-select v-model="form.flowRateType" style="width: 100%;" placeholder="请选择流量类型">
            <el-option v-for="(item, i) in extData.flowRateTypeList || []" :key="i" :label="item.key"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="撞库类型" prop="checkType">
          <el-select v-model="form.checkType" placeholder="请选择撞库类型">
            <el-option v-for="(item, i) in extData.checkTypeList || []" :key="i" :label="item.key"
                       :value="item.value"></el-option>
          </el-select>
          <br>
          <span style="color: red">注意：撞库类型不可多选，默认为全类型撞库</span>
        </el-form-item>


        <el-form-item label="渠道价格" prop="priceAmount">
          <el-input v-model="form.priceAmount" placeholder="请输入渠道价格" />
        </el-form-item>

        <el-form-item label="渠道比率" prop="channelRate">
          <el-input v-model="form.channelRate" placeholder="请输入渠道比率" />
          <span>注意：1.注册计价渠道，表示结算的比例；2.信息流渠道，表示上报的概率。3.假如0.3，表示注册渠道结算量为总量的30%；信息流渠道表示，每个注册有30%的概率上报。</span>
        </el-form-item>

        <el-form-item label="不扣量数" prop="noDiscountNumber">
          <el-input v-model="form.noDiscountNumber" placeholder="请输入不扣量数" />
          <span>注意：注册计价，注册的前N个不进行扣量。渠道注册计价生效</span>
        </el-form-item>

        <el-form-item label="应用名称" prop="appCode">
          <el-select v-model="form.appCode" style="width: 100%;" placeholder="请选择应用名称">
            <el-option v-for="(item, i) in extData.appInfoList || []" :key="i" :label="item.key" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地页类型" prop="pageType">
          <el-select v-model="form.pageType" style="width: 100%;" placeholder="请选择落地页类型">
            <el-option v-for="(item, i) in extData.pageTypeMapList || []" :key="i" :label="item.key"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="渠道类型" prop="channelType">
          <el-select v-model="form.channelType" style="width: 100%;" placeholder="请选择渠道类型">
            <el-option v-for="(item, i) in extData.channelTypeList || []" :key="i" :label="item.key"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="渠道商务" prop="ownerId">
          <el-select v-model="form.ownerId" style="width: 100%;" placeholder="请选择渠道商务">
            <el-option v-for="(item, i) in extData.ownerInfoList || []" :key="i" :label="item.nickname"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open1" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="应用名称" prop="onceAppCode">
          <el-select v-model="onceAppCode" clearable placeholder="请搜索应用名称" filterable multiple>
            <el-option v-for="(item, i) in extData.appInfoList || []" :key="i" :label="item.key" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="changeType">
          <el-select v-model="changeType" clearable placeholder="请选择" filterable>
            <el-option v-for="(item, i) in changeTypeMap || []" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormExt2">确 定</el-button>
        <el-button @click="() => open1 = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="open2" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="应用名称" prop="onceAppCode">
          <el-select v-model="onceAppCode" clearable placeholder="请搜索应用名称" multiple filterable>
            <el-option v-for="(item, i) in extData.appInfoList || []" :key="i" :label="item.key" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="changeType">
          <el-select v-model="changeType" clearable placeholder="请选择" filterable>
            <el-option v-for="(item, i) in changeTypeMap || []" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormExt1">确 定</el-button>
        <el-button @click="() => open2 = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style>
.single-line-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}

.label-spacing {
  margin-right: 10px;
  /* 根据需要调整间距的大小 */
}
</style>
<script>
import {
  listBaseInfo,
  getBaseInfo,
  delBaseInfo,
  addBaseInfo,
  updateBaseInfo,
  baseInfoExtData,
  changeInfoStatus,
  updateChannelBaseInfo,
  changeSmsInfoStatus, updateChannelBaseInfo1,
} from "@/api/channel/baseInfo";

import {
  getChannelExtInfo,
  updateChannelExtInfo
} from "@/api/channel/channelExtInfo";

import { isMobile } from 'mobile-device-detect';
import {updateAppletInfoByH5} from "@/api/applet/browser";

export default {
  name: "BaseInfo",
  data() {
    return {
      checkList: [],
      loginInfoDialogVisible: false, // 控制弹窗显示/隐藏
      loginInfo: {
        adminName: '',
        adminPwd: '',
        loginAddress: process.env.VUE_APP_LOGIN_URL
      },
      unionKeyDialogVisible: false,
      unionKey: {
        channelCode: '',
        appSecret: '',
        requestUrl: process.env.VUE_APP_REQUEST_URL
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: !isMobile,
      // 总条数
      total: 0,
      // 渠道基本信息表格数据
      baseInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      open2: false,
      onceAppCode: '',
      changeType: null,
      changeTypeMap: [
        {
          value: 'smsSendStatus',
          label: '短信营销'
        },
        {
          value: 'taskStatus',
          label: '留资定时状态'
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        channelCode: null,
        channelName: null,
        channelType: null,
        channelRate: null,
        chargeType: null,
        priceAmount: null,
        status: null,
        smsFlag: null,
        pageType: null,
        pageUrl: null,
        ownerId: null,
        ownerName: null,
        appCode: null,
        appName: null,
        notVisitBrowser: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        channelName: [
          { required: true, message: "渠道名称不能为空", trigger: "blur" },
        ],
        channelType: [
          { required: true, message: "渠道类型不能为空", trigger: "change" },
        ],
        channelRate: [
          { required: true, message: "渠道比率不能为空", trigger: "blur" },
        ],
        chargeType: [
          { required: true, message: "计价类型不能为空", trigger: "change" },
        ], flowRateTypeList: [
          { required: true, message: "流量类型不能为空", trigger: "change" },
        ],
        priceAmount: [
          { required: true, message: "渠道价格不能为空", trigger: "blur" },
        ],
        ownerId: [
          { required: true, message: "商务ID 不能为空", trigger: "blur" },
        ],
      },
      extData: {},
      formExt: {
        zhimaFilterArray: []
      },
      // 是否显示弹出层
      openExt: false,
      // 弹出层标题
      titleExt: "",
    };
  },
  watch: {
    checkList(val) {
      this.formExt.zhimaFilterArray = this.extData.zhimaMapList.filter(item => (val || []).includes(item.key)).map(item => item.value)
      console.log(this.formExt.zhimaFilterArray)
    },
    // 'formExt.zhimaFilterArray': function(val){
    //   console.log(val)
    //   this.checkList = val.
    // },
  },
  created() {
    this.getList();
    this.getOptions();
  },
  methods: {
    changeHandler(value) {
      console.log(value)
    },
    getOptions() {
      baseInfoExtData().then((response) => {
        this.extData = response.data;
      });
    },
    /** 查询渠道基本信息列表 */
    getList() {
      this.loading = true;
      listBaseInfo(this.queryParams).then((response) => {
        this.baseInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**展示卡片 */
    showLoginInfo(row) {
      this.loginInfoDialogVisible = true;
      this.loginInfo.adminName = row.adminName;
      this.loginInfo.adminPwd = row.adminPassword;
    },
    showUnionKey(row) {
      this.unionKeyDialogVisible = true;
      this.unionKey.channelCode = row.channelCode;
      this.unionKey.appSecret = row.appSecret;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.loginInfoDialogVisible = false;
      this.openExt = false;
      this.reseExt();
    },
    // 渠道状态修改
    handleStatusChange(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, status: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.status = row.status == "0" ? "1" : "0";
      })
    },    // 渠道状态修改
    changeSmsInfoStatus(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, smsFlag: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.smsFlag = row.smsFlag == "0" ? "1" : "0";
      })

    }, changeProductStatus(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, showProductFlag: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.smsFlag = row.smsFlag == "0" ? "1" : "0";
      })
    },
    changeApibStatus(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, apibStatus: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.smsFlag = row.smsFlag == "0" ? "1" : "0";
      })
    },
    channelSmsSendStatus(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, smsSendStatus: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.smsFlag = row.smsFlag == "0" ? "1" : "0";
      })
    },

    channelTaskStatus(row, value) {
      let text = (+value) === 0 ? "停用" : "启用";
      changeInfoStatus({ id: row.id, taskStatus: +value }).then(res => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(() => {
        row.smsFlag = row.smsFlag == "0" ? "1" : "0";
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        channelCode: null,
        channelName: null,
        channelType: null,
        channelRate: null,
        chargeType: null,
        priceAmount: null,
        status: null,
        smsFlag: null,
        pageType: null,
        pageUrl: null,
        ownerId: null,
        ownerName: null,
        appCode: null,
        appName: null,
        notVisitBrowser: null,
        createTime: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    // 表单重置
    reseExt() {
      this.formExt = {
        channelCode: null,
        zhimaFilter: null,
        zhimaFilterArray: [],
        createTime: null,
        updateTime: null,
      };
      this.resetForm("formExt");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.ownerId = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加渠道基本信息";
      this.form.channelRate = 0;
      this.form.noDiscountNumber = 0;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getBaseInfo(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改渠道基本信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.onceAppCode)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateBaseInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBaseInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitFormExt() {
      this.$refs["formExt"].validate((valid) => {
        if (valid) {
          updateChannelExtInfo(this.formExt).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.openExt = false;
          });
        }
      });
    },

    submitFormExt1() {
      console.log(this.onceAppCode)
      updateChannelBaseInfo({ appCode: this.onceAppCode.join(','), [this.changeType]: 0 }).then(response =>{
        this.$modal.msgSuccess("全部已关闭");
        this.open2 = false;
        this.onceAppCode = '';
        this.getList();
      })
    },
    updateChannel() {
      this.reset();
      this.open1 = true;
      this.title = "一键开始状态";
    },
    updateChannel1() {
      this.reset();
      this.open2 = true;
      this.title = "一键关闭状态";
    },
    submitFormExt2() {
      console.log(this.onceAppCode)
      updateChannelBaseInfo1({ appCode: this.onceAppCode.join(','), [this.changeType]: 1 }).then(response =>{
        this.$modal.msgSuccess("全部启用成功");
        this.open1 = false;
        this.onceAppCode = '';
        this.getList();
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除渠道基本信息编号为"' + ids + '"的数据项？')
        .then(function () {
          return delBaseInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "channel/baseInfo/export",
        {
          ...this.queryParams,
        },
        `baseInfo_${new Date().getTime()}.xlsx`
      );
    },
    /** 修改扩展信息 */
    handleUpdateExtInfo(row) {
      const channelCode = row.channelCode;
      getChannelExtInfo(channelCode).then((response) => {
        this.formExt = response.data;
        this.checkList = response.data.zhimaFilterArray.map(item1 => (this.extData.zhimaMapList.find(item => item1 == item.value) || {}).key)
        this.openExt = true;
        this.titleExt = "修改渠道扩展信息";
      });
    },
  },
};
</script>
